<template>
  <el-row class="IoSpeakingWriting-box" >
    <el-col :span="24" class="IoSpeakingWriting-page">
      <div
        id="Cpu"
        class="linePage ScaleCSSViewport_unzoom"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#021033"
      ></div>
      
    </el-col>
    <el-col :span="24" class="IoSpeakingWriting-file">
      <span class="LoadFile"
        >CPU使用率 ：{{ this.read ? this.read + " %" : "0" + " %" }}
      </span>
    </el-col>
  </el-row>
</template>>

<script>
import { fetchData } from "@/api/index.js";
import bus from "common/bus.js";
import { Line } from "@antv/g2plot";

export default {
  data() {
    return {
      selectedMonID: "",
      timerName: "CpuAndIo",
      timerEventName: "timerCpuAndIo",
      timerInterval: 1000 * 30,
      lineItem: "",
      lineData: [],
      read: "",
      loading: false,
      postData: {
        filters: {
          monid: "",
          ip: "",
        },
      },
      getNum: 30,
    };
  },
  props: { initData: null },
  created() {
    bus.$on("SqlServerInitChart", (msg) => {
      this.resetData();
      //  console.log(msg[0].data)
      //  console.log(msg[1].IP)
      this.selectedMonID = msg[0].data.filter((item) => {
        return item.IP.includes(msg[1].IP);
      });

      // this.selectedMonID = msg;

     


          this.initGetData();
      


        
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

     bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {

                this.initGetData();
            }
        });
  },
  mounted() {
    this.initLine();
  },
  computed: {},
  methods: {
    initGetData() {
      // this.loading=true
      // console.log(this.selectedMonID)
      if (this.selectedMonID.length > 0) {
        let _postData = {
          opera: "CpuUsageLine",
          filters: {
            monid: this.selectedMonID[0].MONID,
            pointNum: this.getNum,
          },
        };
        // console.log(_postData)
        fetchData({
          postData: JSON.stringify(_postData),
        }).then((res) => {
         
          
         
          this.lineData = res.data.map((item) => {
            return {
              Date: item.RECORD_TIME,
              scales: Number((100 - item.CPU_IDLE).toFixed(1)),
            };
          });

          

          // if (res.data.length === 0) {
          //   // console.log(this.lineItem)
          
          //   // this.lineItem.update({ data: [] });

          // } else {
            
            this.lineItem.changeData(this.lineData);
           this.read= res.data.length>0?Number((100 - [...res.data].pop().CPU_IDLE).toFixed(1)):0
            
          // }
        }).finally(_=>{});
      } else {
        this.lineItem.changeData([]);
        // this.loading=false
      }

      
    },
    

    resetData() {
      this.lineData = [];
      this.read = "";
    },
    initLine() {
      
      this.lineItem = new Line("Cpu", {
        data: this.lineData,
        padding: "auto",
        xField: "Date",
        yField: "scales",
        height: 110 * this.ZOOM,
        
        xAxis: false,
        areaStyle: () => {
        return {
          fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#FF0000',
        }},
       
        tooltip: {
          formatter: (datum) => {
            return { name: "使用率", value: datum.scales + "%" };
          },
        },
      });

      this.lineItem.render();
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    this.lineItem.destroy();
     bus.$off('SqlServerInitChart')
  },
};
</script>
<style scoped>
.IoSpeakingWriting-box {
  height: 100%;
}
.IoSpeakingWriting-page {
  height: 70%;
  width: 100%;
}
.linePage {
  height: 100%;
  width: 100%;
}
.IoSpeakingWriting-file {
  height: 30%;
  width: 100%;
  text-align: center;
  
}
</style>